<template>
  <div class="app-container">
    <el-backtop visibility-height="10"></el-backtop>
    <!--工具栏 -->
    <el-row :gutter="25">
      <el-col :span="25" :xs="24">
        <el-form :model="conditions" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="用户账号" prop="username">
            <el-input v-model="conditions.username" placeholder="请输入用户账号" clearable/>
          </el-form-item>
<!--          <el-form-item label="简历状态" prop="status">-->
<!--            <el-select v-model="conditions.status" clearable placeholder="请选择">-->
<!--              <el-option value="0" label="启用"/>-->
<!--              <el-option value="1" label="禁用"/>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label="创建时间" prop="create_time">
            <el-date-picker
              v-model="conditions.create_time"
              type="daterange"
              format="yyyy-MM-DD" value-format="yyyy-MM-DD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" :loading="loading"
                       @click="query"
            >搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" :loading="loading" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!--工具栏2 -->
    <el-row :gutter="10">
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                   @click="handleDeleteUserResumeFile"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-message" size="mini" :disabled="single"
                   @click="handlePlatformResumeDetailsFile"
        >查看详情
        </el-button>
      </el-col>
    </el-row>

    <el-row style="margin-top: 10px">
      <el-table
        v-loading="loading"
        :data="files"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="center"/>
        <el-table-column label="编号" type="index" align="center"></el-table-column>
        <el-table-column label="用户" prop="username" align="center"></el-table-column>
        <el-table-column label="文件名" prop="file_name" align="center"></el-table-column>
        <el-table-column label="文件大小" prop="file_size" align="center">
          <template slot-scope="scope">
            {{ Math.ceil(scope.row.file_size/1024) }}KB
          </template>
        </el-table-column>
        <el-table-column label="存储桶" prop="bucket" align="center"></el-table-column>
        <el-table-column label="存储路径" prop="location" align="center" width="250"></el-table-column>
<!--        <el-table-column label="文件状态" prop="status" align="center" width="100">-->
<!--          <template slot-scope="scope">-->
<!--            <el-switch-->
<!--              v-model="scope.row.status"-->
<!--              :active-value="0"-->
<!--              :inactive-value="1"-->
<!--              @change="handleStatusChange(scope.row)"-->
<!--            ></el-switch>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
          label="创建时间" align="center"
          width="150"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ msToDate(scope.row.create_time).withoutTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-reading"
                       @click="handlePlatformResumeDetailsFile(scope.row.id)"
            >详情
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-delete"
                       @click="handleDeleteUserResumeFile(scope.row.id)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row type="flex" justify="center" style="margin-top: 20px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="conditions.currentPage"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="conditions.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="files_total">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { msToDate } from '@/utils/format'
import fa from 'element-ui/src/locale/lang/fa'

export default {
  name: 'Files',
  data() {
    return {
      loading: false,
      server: window.application.minio_host,
      backend: window.application.server_host,
      conditions: {
        username: '',
        create_time: [],
        status: '',
        size: 10,
        currentPage: 1
      },
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true
    }
  },
  mounted() {
    this.query()
  },
  computed: {
    ...mapGetters(['files','files_total'])
  },
  methods: {
    msToDate,
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    query() {
      this.loading = true
      this.$store.dispatch('resume/getAllUsersFileResume', this.conditions)
        .then((resp) => {
        })
        .catch((error) => {
          this.$message.error(error)
        }).finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 1500)
      })
    },
    reset() {
      this.conditions = {
        username: '',
        create_time: [],
        status: '',
        size: 10,
        currentPage: 1
      }
      this.query()
    },
    handleSizeChange(val) {
      this.conditions.size = val
      this.query()
    },
    handleCurrentChange(val) {
      this.conditions.currentPage = val
      this.query()
    },
    handleDeleteUserResumeFile(id) {
      if (id instanceof PointerEvent) {
        this.deleteFilesRequest({ ids: this.ids })
      } else {
        this.deleteFilesRequest({ ids: [id] })
      }
    },
    deleteFilesRequest(id) {
      this.loading = true
      this.$confirm(`确认删除该简历?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch("resume/removeFilesByIds", id)
          .then(r => {
            if (r) this.$message.success("删除成功")
          }).catch((error) => {
          this.$message.error(error)
        }).finally(() => {
          setTimeout(() => {
            this.loading = false
          },1500)
        })
      }).catch(() => {
        this.loading = false
      })
    },
    handlePlatformResumeDetailsFile(id) {
      if (id instanceof PointerEvent) {
        this.downloadFile(this.ids[0])
      } else {
        this.downloadFile(id)
      }
    },
    async downloadFile(id) {
      this.loading = true
      let url = this.backend + "fileResumeBg/file/online/" + id
      await window.open(url)
      setTimeout(() => {
        this.loading = false
      }, 3000)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
